<template>
	<view class="CardIndex">
		<u-navbar :auto-back="true" title="卡包中心" :placeholder="false" bg-color="transparent"></u-navbar>
		<view class="topBg" v-if="detail&&list.length>0"></view>
		<view class="userBox" v-if="detail&&list.length>0">
			<u-image width="67rpx" height="67rpx" :src="detail.avatar" radius="67rpx" customStyle="border: 1px solid yellow;"/>
			<view class="userInfo">
				<view class="name">
					<text>{{detail.nickname}}</text>
					<view class="tag" :class="'card_type' + list[0].card_type">
						<u-image :src="`/static/mine/icon1.png`" width="29rpx" height="29rpx"/>
						<text>{{ list[0].card_type == 1 ? '黄金版会员' : '豪华版会员'}}</text>
					</view>
					<view class="tag card_type2" v-if="list[0].card_type == 1" @click="$goUrl('/pages/mine/card/buy', 'to')">
						<text>升级豪华版</text>
					</view>
				</view>
				<view class="date">{{detail.starttime}} 至 {{detail.overtime}}</view>
			</view>
		</view>
		<view class="cardBox" v-if="detail&&list.length>0">
			<image class="buy_bg" mode="widthFix" :src="mainBaseUrl + '/assets/xcx/vip_bg.jpg'"></image>
			<view class="buy_app"><text>{{list[0].card_cn}}</text></view>
		</view>
		<view v-if="list.length===0" class="empty_box">
			<u-empty mode="card" textColor="#1E272E" textSize="28rpx" icon="/static/empty/card.png" text="你还没有会员卡，快去购买吧~"></u-empty>
			<view class="card_btn">
				<u-button throttleTime="1000" color="#45B9A2" shape="circle" :customStyle="btnStyle1" @click="$goUrl('/pages/mine/card/active','to')" text="去激活"></u-button>
				<u-button throttleTime="1000" shape="circle" :customStyle="btnStyle2" @click="$goUrl('/pages/mine/card/buy','to')" text="去购卡"></u-button>
			</view>
		</view>
		<view class="memberQy">会员权益</view>
		<view class="qyList">
			<view class="qyitem">
				 <u-image width="120rpx" height="120rpx" src="/static/buy/icon1.png"/>
				 <text>免票入园</text>
			</view>
			<view class="qyitem">
				 <u-image width="120rpx" height="120rpx" src="/static/buy/icon2.png"/>
				 <text>一日一票</text>
			</view>
			<view class="qyitem">
				 <u-image width="120rpx" height="120rpx" src="/static/buy/icon3.png"/>
				 <text>精品景区</text>
			</view>
			<view class="qyitem">
				 <u-image width="120rpx" height="120rpx" src="/static/buy/icon4.png"/>
				 <text>时效一年</text>
			</view>
		</view>
		<view class="line"></view>
		<view class="desc">
			<u-parse :content="detail.supplement"></u-parse>
		</view>
	</view>
</template>

<script>
	import { cardIndex, cardInfo } from '@/common/http.api.js';
	let that;
	export default {
		data() {
			return {
				detail: '',
				pageLoading: true,
				listStatus: 'loading',
				list: []
			}
		},
		onLoad() {
			that = this;
			that.appName = uni.getSystemInfoSync().appName
		},
		onShow() {
			that.cardIndex(),that.cardInfo();
		},
		methods: {
			cardIndex() {
				cardIndex({})
					.then(res => {
						that.detail = res.data;
						that.pageLoading = false
					})
					.catch(err => {
						uni.$u.toast(err.msg);
					});
			},
			cardInfo() {
				cardInfo()
					.then(res => {
						that.list = res.data.data,that.listStatus = 'nomore';
					})
					.catch(err => {
						uni.$u.toast(err.msg);
					});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.CardIndex {
		min-height: 100vh;
		background-color: #F6F8FA;
		.topBg {
			width: 749rpx;
			height: 669rpx;
			background: linear-gradient(-12deg, #54DCD4, #48CCC4);
		}
		.userBox {
			position: absolute;
			margin-top: 5px;
			top: 200rpx;
			padding: 30rpx;
			display: flex;
			width: 100%;
			gap: 10rpx;
			.userInfo {
				display: flex;
				flex-direction: column;
				gap: 10rpx;
				text {
					font-family: Source Han Sans CN;
					font-weight: 500;
					font-size: 34rpx;
					color: #FFFFFF;
					line-height: 38rpx;
				}
				.tag {
					border-radius: 19rpx;
					display: flex;
					gap: 10rpx;
					padding: 0rpx 20rpx;
					text {
						color: #fff;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}
				.card_type1 {
					background:#4FC3AD;
				}
				.card_type2 {
					background: linear-gradient(135deg, #CAAF64, #E6D9A0);
				}
				.name {
					display: flex;
					align-items: center;
					gap: 10rpx;
				}
			}
			.date {
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
		.cardBox {
			position: absolute;
			top: 308rpx;
			align-items: center;
			margin: 30rpx;
			.buy_bg {
				width: 690rpx;
			}
			.buy_app {
				text-align: center;
				position: absolute;
				top: 150rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				font-size: 48rpx;
				width: 100%;
				text {
					color: #FFFFFF;
				}
			}
		}
		.memberQy {
			font-family: Source Han Sans CN;
			font-weight: bold;
			font-size: 32rpx;
			color: #353535;
			margin: 47rpx 0 40rpx 56rpx;
		}
		.empty_box {
			padding: 200rpx 100rpx 0;
			.card_btn{
				padding: 72rpx;
				display: flex;
				gap: 20rpx;
			}
		}
		.qyList {
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;
			.qyitem {
				display: flex;
				flex-direction: column;
				gap: 20rpx;
			}
		}
		.line {
			width: 750rpx;
			height: 8rpx;
			background: #F5F5F5;
			margin-top: 40rpx;
		}
	}
</style>
